<template>
    <div>
        <div class="nav acea-row row-between row-middle">
            <svg viewBox="0 0 1000 1000" class="nav-back" v-show="isShowBack" @click="back">
                <path fill="#FFFFFF" fill-rule="evenodd" d="M296.114 508.035c-3.22-13.597.473-28.499 11.079-39.105l333.912-333.912c16.271-16.272 42.653-16.272 58.925 0s16.272 42.654 0 58.926L395.504 498.47l304.574 304.574c16.272 16.272 16.272 42.654 0 58.926s-42.654 16.272-58.926 0L307.241 528.058a41.472 41.472 0 0 1-11.127-20.023z"></path>
            </svg>
            <div class="nav-right" v-show="!isShowSearch"></div>
            <div class="nav-title">{{title}}</div>
            <div class="nav-right" v-show="!isShowSearch"></div>
            <div class="search-box acea-row row-middle" v-show="isShowSearch">
                <Icon name="search" size="16" color="#fff"/>
                <span class="search-text">搜索</span>
            </div>
        </div>
    </div>
</template>

<script>
    import { Icon } from 'vant';
    export default {
        name: "NavBar",
        components:{
            Icon
        },
        props:{
            isShowBack: {
                type: Boolean,
                default: true,
            },
            title: {
                type: String,
                required:true
            },
            isShowSearch:{
                type:Boolean,
                default:false,
                required: true
            }
        },
        data() {
            return {}
        },
        methods:{
            back() {
                this.$router.go(-1)
            }
        }
    }
</script>

<style scoped lang="scss">
    .nav{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background-color: #0DCDB5;
        height: 45px;
        padding: 0 10px;
        z-index: 5;
        .nav-title{
            text-transform:capitalize;
            font-weight:500;
            font-size:20px;
            color: #fff;
            text-align: center;
        }
        .nav-right{
            flex: 1;
        }
        .nav-back{
            width: 17px;
            height: 17px;
        }
        .search-box{
            width:70px;
            height:32px;
            background-color: rgba(0,0,0,.2);
            border-radius:17px;
            padding-left: 10px;
            .search-text{
                font-size:12px;
                font-weight:500;
                color: #ffffff;
                margin-left: 3px;
            }
        }
    }
</style>
